<template>
	<view class="wrapper">
		<carHeader :title="'导航'"></carHeader>
		<view class="container">
			<view class="top">
				<map :latitude="latitude" :longitude="longitude" :markers="covers" class="daohang">
				</map>
			</view>
			<view class="bottom">
				<view class="bot-left">
					<view class="bot-name">
						{{name}}
					</view>
					<view class="bot-address">
						{{address}}
					</view>
				</view>
				<view class="bot-right">
					<button type="primary" size="mini" style="border-radius: 40rpx;">导航</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 34.826128,
				longitude: 113.558902,
				covers: [{
					latitude: 34.826128,
					longitude: 116.39742,
					iconPath: '../../static/车联网服务-04汽车保养_slices/位置 拷贝 8.png'
				}, {
					latitude: 34.826128,
					longitude: 116.39742,
					iconPath: '../../static/车联网服务-04汽车保养_slices/位置 拷贝 8.png'
				}],
				name: "",
				address: ""
			}
		},
		methods: {

		},
		// 接收在列表视图下，小飞机传来的参数
		onLoad(obj) {
			// console.log(obj);
			this.name = obj.name;
			this.address = obj.address;
			// console.log(this.name);
		}
	}
</script>

<style lang="scss">
	.wrapper {
		position: relative;
	}

	.container {
		width: 88%;
		position: absolute;
		top: 120rpx;
		left: 14rpx;
		margin: 0 auto;
		border-radius: 30rpx;
		background-color: #fff;
		padding: 30rpx;

		.top {
			.daohang {
				margin-top: 10rpx;
				height: 1024rpx;
				width: 100%;
			}
		}

		.bottom {
			display: flex;
			margin-top: 40rpx;

			.bot-name {
				font-size: 32rpx;
				font-weight: bold;
			}

			.bot-address {
				margin-top: 10rpx;
				font-size: 28rpx;
				color: #000;
			}

			.bot-right {
				margin-left: 170rpx;
				margin-top: 14rpx;
			}
		}
	}
</style>